<template>
	<div>
		<div class="lxl-filter">
			<el-button style="float: right;" type="primary" icon="el-icon-plus" @click="add(0, 1)">添加</el-button>
			<div class="clear"></div>
		</div>
		<el-table border
		 row-key="id"
		 :data="tableData">
			<el-table-column label="资源名称" prop="name" width="200"></el-table-column>
			<el-table-column label="类别" prop="type" width="80">
				<template slot-scope="scope">
					<span v-if="scope.row.type">目录</span>
					<span v-else>按钮</span>
				</template>
			</el-table-column>
<!-- 			<el-table-column label="层级" prop="level" width="80"></el-table-column>
			<el-table-column label="上级id" prop="parentId" width="80"></el-table-column> -->
			<el-table-column label="前端地址" prop="frontUrl" width="80"></el-table-column>
			<el-table-column label="后端地址" prop="backUrl" width="80"></el-table-column>
		
			<el-table-column width="250">
				<template slot-scope="scope">
					<template>
						<el-button v-if="scope.row.type" size="mini" type="primary" plain @click="add(scope.row.id, scope.row.level+1)">添加下级</el-button>
						<el-button size="mini" @click="update(scope.row.id)">修改</el-button>
						<el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		 <el-dialog
		 width="450px"
			:title="dialog.title"
			:visible.sync="dialog.show"
			:close-on-click-modal="false">
			<component 
			v-if="dialog.show" 
			:id="dialog.id"
			:module="dialog.module"
			:is="dialog.component"
			:show.sync="dialog.show"
			:parentId="dialog.parentId"
			:level="dialog.level"
			@getTableData="getTableData">
			</component>
			<!-- 加sync是能让子组建能修改属性 -->
		</el-dialog>
	</div>
</template>

<script>
import { get,post,request } from '@/plugins/axios'
export default {
	name: 'ResourceIndex',
	created() {
		// 尽可能不在此写代码
		this.getTableData();
	},
	data () {
		const module = '/umsResource'
		return {
			tableData: [],
			url: {
				list: module + '/list',
				del : module + '/del',
			},
			txt: {
				add: '添加资源',
				update: '修改资源'
			},
			dialog: {
				title: '',
				show: false,
				id: null,
				parentId: null,
				level: null,
				module: module,
				component: () => import('./edit')
			}
		}
	},
	methods: {
		// 获取数据
		getTableData () {
			request(this.url.list, 'get', {}, response => {
					this.tableData = response
				})
			},
		//添加用户
		add (parentId, level) {
			this.dialog.parentId = parentId
			this.dialog.level = level
			this.dialog.title = this.txt.add
			this.dialog.id = null
			this.dialog.show = true
		},
		//修改用户
		update (id) {
			this.dialog.title = this.txt.update
			this.dialog.id = id
			this.dialog.show = true
		},
		//删除用户
		del (id) {
			const txt = '确认要删除该数据吗?'
			const title = '提示'
			this.$confirm(txt, title, {
				type: 'warning'
			}).then(() => {
				post(this.url.del,{ id: id }, response=>{
					this.getTableData()
				})
			}).catch(() => {})
			
		}
	},
}
</script>

<style>
</style>
